<template>
  <div class="main">
    <!-- 上部分内容区 -->
    <el-row :gutter="6">
      <!-- 左侧分类区域 -->
      <el-col :span="6">
        <Category />
      </el-col>
      <!-- 中部轮播图 -->
      <el-col :span="12">
        <Carousel />
      </el-col>
      <!-- 右侧公告区域 -->
      <el-col :span="6">
        <Notice />
      </el-col>
    </el-row>
    <el-divider content-position="center">热门二手</el-divider>
    <!-- 商品列表展示区域 -->
    <div class="goods-list">
      <GoodsList :props="goodsPropsName" :goods="goods" />
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        current-page.sync="currentPage2"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="paginationQuery.pageSize"
        layout="sizes, prev, pager, next"
        :total="goodsInfo.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Category from '@/pages/Home/Category'
import Carousel from '@/pages/Home/Carousel'
import Notice from '@/pages/Home/Notice'
import GoodsList from '@/components/GoodsList'

import { goodsRestful } from '@/api/goods'

export default {
  name: '',
  components: {
    Category,
    Carousel,
    Notice,
    GoodsList
  },
  data() {
    return {
      goods: [],
      goodsInfo: {},
      goodsPropsName: {
        indexName: 'id',
        goodsId: 'id',
        coverName: 'coverUrl',
        titleName: 'goodsName',
        pulisherName: 'publisherName'
      },
      paginationQuery: {
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    ...mapState({
      testMsg: state => state.home.testMsg,
      showLogout: state => state.header.showLogout
    })
  },
  methods: {
    handleSizeChange(val) {
      this.paginationQuery.pageSize = val;
      this.fetchGoods();
    },
    handleCurrentChange(val) {
      this.paginationQuery.currentPage = val;
      this.fetchGoods();
    },
    fetchGoods() {
      goodsRestful.fetchList(this.paginationQuery).then(({ data, data: { records }}) => {
        this.goodsInfo = data;
        this.goods = records;
      })
    }
  },
  created() {
    this.$store.commit('header/SHOW_LOGOUT_LINK', true)
    this.fetchGoods()
  }
}
</script>

<style lang="less" scoped>
.main {
  height: auto;
  background-color: #e9eef3;
  padding: 20px;
  .el-row {
    margin-bottom: 20px;
    height: 450px;
    // margin-top: 30px;
    // display: flex;
    /*定义子级元素垂直居中*/
    // align-items: center;
    overflow: hidden;
    &:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: 4px;
      height: 450px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
  // .el-row:first-of-type {
  //   margin-top: 0px;
  // }
  .el-divider__text {
    letter-spacing: 15px;
    line-height: 16px;
    background-color: rgba(1, 1, 1, 0);
  }
}
</style>
